<template>
  <div class="lnzzqst">
    <div class="header space-between align-center w100">
      <div class="flex align-center">
        <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang3_f8f39a01722849fbb749aefb25d9c755.png'" class="img" />
        <div class="name">历年种植趋势图</div>
      </div>
      <img
        v-show="show"
        @click="handleClick"
        :src="imgUrl + '/profile/personinfo/2023/6/20/lang2_d966d366dae5476a8e6889b30b1b8c82.png'"
        class="img1"
      />
    </div>
    <div class="area">
      <div class="h100p w100" ref="cross"></div>
    </div>
    <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang4_73a1fc1e81c446e5894ac4101272c833.png'" class="w100" />
  </div>
</template>

<script>
export default {
  name: 'Lnzzqst',
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API
    }
  },
  mounted() {
    this.cross()
  },
  methods: {
    cross() {
      if (this.info.val23) {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            textStyle: {
              color: '#ffffff' //字体颜色
            },
            data: ['总种植面积', '经营户种植面积']
          },
          grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          color: ['#FFCF3B', '#22F6F7'],
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['2023', '2022', '2021', '2020', '2019', '2018', '2017'],
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: {
                lineStyle: {
                  type: 'solid', //虚线
                  color: ['#0D97EB']
                },
                show: true //隐藏
              }
            }
          ],
          series: [
            {
              name: '总种植面积',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: this.info.val23.split(',')
            },
            {
              name: '经营户种植面积',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: this.info.val24.split(',')
            }
          ]
        }
        const charts = this.$echarts.init(this.$refs.cross)
        charts.setOption(option, true)
      }
    },
    handleClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.lnzzqst {
  margin-left: 0.1rem;
  //height: 4.16rem;
  height: calc((100vh - 1.2rem) / 3);

  .header {
    background-size: 100% 100%;
    font-size: 0.18rem;
    height: 0.42rem;
    background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang7_a953852ebaf143d2994fe879e106efda.png');
    background-repeat: no-repeat;
    background-position-x: center;
    box-sizing: border-box;

    .img {
      width: 0.16rem;
      height: 0.14rem;
      margin-left: 0.1rem;
      margin-right: 0.15rem;
    }

    .img1 {
      width: 0.36rem;
      height: 0.16rem;
      margin-right: 0.1rem;
    }
  }

  .area {
    width: 6.9rem;
    height: 3.5rem;
  }
}
</style>